<template>
  <div class="Details_Page">
    <!-- 印章详情  -->
    <pageHeader
      :title="title"
      :breadCrumb="breadCrumb"
      :show-back="true"
    ></pageHeader>
    <div class="content">
      <a-layout style="height: 100%">
        <a-layout-sider style="width: 30%">
          <div class="S-content" style="padding: 20px">
            <a-space align="center" direction="vertical" fill>
              <a-image
                width="200"
                src="https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/a8c8cdb109cb051163646151a4a5083b.png~tplv-uwbnlip3yd-webp.webp"
              />
              <div style="font-size: 20px">
                <a-space>
                  <a-typography-text type="secondary">
                    {{ data.name }}
                  </a-typography-text>
                  <a-popconfirm>
                    <template #content
                      ><span>新名称：</span
                      ><a-input
                        placeholder="请输入角色名称"
                        v-model="data.name"
                        allow-clear
                      ></a-input
                    ></template>
                    <icon-edit @click="editName" />
                  </a-popconfirm>
                </a-space>
              </div>
              <div>
                <a-descriptions :column="1">
                  <a-descriptions-item label="用章次数">
                    {{ data.time }}
                  </a-descriptions-item>
                  <a-descriptions-item label="印章状态">
                    <a-typography-text> 停用 </a-typography-text>
                    <a-switch
                      @change="alterState"
                      :default-checked="true"
                      :checked-value="1"
                      :unchecked-value="2"
                      :v-model="data.enable"
                    />
                    <a-typography-text type="primary"> 启用 </a-typography-text>
                  </a-descriptions-item>
                  <a-descriptions-item label="印章类型">
                    {{ data.type }}
                  </a-descriptions-item>
                  <a-descriptions-item label="印章规格">
                    {{ data.size }}
                  </a-descriptions-item>
                  <a-descriptions-item label="制作时间">
                    {{ data.createdAt }}
                  </a-descriptions-item>
                </a-descriptions>
              </div>
            </a-space>
          </div>
        </a-layout-sider>
        <a-layout-content>
          <div class="C_content">
            <a-tabs default-active-key="1">
              <a-tab-pane key="1" title="印章使用人">
                <div style="padding-left: 30px">
                  <Userseal :eid="Data.id"></Userseal>
                </div>
              </a-tab-pane>
              <a-tab-pane key="2" title="用章统计">
                <div>
                  <Sstatistical :eid="Data.id"></Sstatistical>
                </div>
              </a-tab-pane>
            </a-tabs>
          </div>
        </a-layout-content>
      </a-layout>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { reactive, ref, toRefs } from 'vue';
  import { useRoute } from 'vue-router';
  import { Modifyseal } from '@/api/contract-management/base-setting/E-signature/index';
  import Userseal from './components/User-seal/index.vue';
  // import Sstatistical from './components/S-statistical/index.vue';
  import EditSeakName from './edit-sealname.vue';

  const route = useRoute();
  const data = reactive(route.query);
  const modelVisible = ref(false);

  const Data = toRefs(data);

  const editName = async () => {
    // await Modifyseal({id:Number(Data.id),name})
    modelVisible.value = true;
  };

  const value = ref(data.enable);

  // 前
  // const alterState = async (e) => {
  //   const Data = {
  //     id: Math.floor(data.id),
  //     enable: Math.floor(e),
  //   };
  //   const res = await Modifyseal(Data);
  // };
  // 解构赋值，parseInt
  const alterState = async (e) => {
    const { id } = data;
    const Data = { id: parseInt(id, 10), enable: parseInt(e, 10) };
    await Modifyseal(Data);
  };

  const title = '印章详情';
  const breadCrumb: string[] = ['合同管理', '基础设置', '电子签章', '印章详情'];
</script>

<style scoped lang="less">
  .Details_Page {
    margin: 0;
    padding: 16px;
    height: 100%;

    .content {
      height: 100%;

      .arco-layout-sider {
        height: 100%;
        width: 800px;
      }

      .arco-layout-content {
      }

      ::v-deep .arco-form-item-label {
        font-size: 14px;
      }

      ::v-deep .arco-row-justify-start {
        width: 800px;
      }

      .S-content {
        width: 100%;
        height: 100%;
      }

      .C_content {
        padding: 20px;
      }

      ::v-deep .arco-typography {
        font-size: 18px;
      }
    }
  }
</style>
